import { defineComponent, reactive, computed, ref } from 'vue'
import './style.scss'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import Logo from '@/assets/svg/logo.svg'
import { equals } from 'ramda'
import { useRouter } from 'vue-router'
import { successTips } from '@/utils'
interface PageState {
	username: string
	password: string
	type: DoType
	loading: boolean
}
enum DoType {
	login = 'LOGIN',
	register = 'REGISTER',
}
export default defineComponent({
	setup() {
		const router = useRouter()
		const antdForm = ref<AntdFrom>()
		const rules = {
			username: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
			password: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
		}
		const pageState = reactive<PageState>({
			username: '',
			password: '',
			type: DoType.login,
			loading: false,
		})
		const isLogin = computed(() => {
			return equals(pageState.type, DoType.login)
		})
		const clone = (type: DoType) => {
			pageState.password = ''
			pageState.username = ''
			pageState.type = type
			antdForm.value?.resetFields()
		}
		async function submit() {
			const ok = await antdForm.value?.validate().then(
				() => null,
				() => true
			)
			if (ok) {
				return
			}
			const params = {
				username: pageState.username,
				password: pageState.password,
			}
			const func = isLogin.value ? API.blog.chatUser.login.request : API.blog.chatUser.registerChatUser.request
			pageState.loading = true
			const { success, data } = await func(params)
			pageState.loading = false
			if (success) {
				successTips(data.msg ?? (isLogin.value ? '登录成功' : '注册成功'))
				localStorage.setItem('accessToken', data?.token)
				localStorage.setItem('userId', data?.user?.id)
				if (equals(pageState.type, DoType.login)) {
					router.push('/')
				} else {
					clone(DoType.login)
				}
			}
		}
		return () => (
			<div id="login">
				<div class="login-bg">
					<div>
						<div class="lg-typeface">Hello! Nice to meet you</div>
					</div>
				</div>
				<div class="login-form-box">
					<a-form class="login-form" model={pageState} rules={rules} ref={antdForm} wrapperCol={{ span: 24 }}>
						<div class="logo">
							<img src={Logo} />
						</div>
						<a-form-item name="username">
							<a-input
								placeholder="User name"
								v-model={[pageState.username, 'value']}
								prefix={<UserOutlined style="font-size: 20px;margin-right: 5px" />}
							/>
						</a-form-item>
						<a-form-item name="password">
							<a-input
								placeholder="Password"
								type="password"
								v-model={[pageState.password, 'value']}
								prefix={<LockOutlined style="font-size: 20px;margin-right: 5px" />}
							/>
						</a-form-item>
						<a-row>
							<a-col span={24} class="login-btn">
								<a-button onClick={submit} loading={pageState.loading}>
									{isLogin.value ? '登录' : '注册'}
								</a-button>
							</a-col>
							<a-col span={24} class="register">
								<a-button
									type="link"
									onClick={() => clone(isLogin.value ? DoType.register : DoType.login)}
									disabled={pageState.loading}
								>
									{isLogin.value ? '注册账户' : '返回登录'}
								</a-button>
							</a-col>
						</a-row>
					</a-form>
				</div>
			</div>
		)
	},
})
